<template>
  <section class="w-full relative box-border overflow-hidden">
    <!-- 背景图 -->
    <div class="absolute inset-0">
      <YImage
        placeholder
        eager
        :src="$withPicOrigin(curGoodsDetail.imageUrl)"
        :alt="curGoodsDetail.name"
        height="100"
        width="100"
        class="w-full h-full object-cover blur-lg opacity-70" />
      <div class="absolute inset-0 bg-gradient-to-b from-[rgba(0,0,0,0)] to-[#181c1c]"></div>
      <!--      <div class="absolute inset-0 goods-bg-gradient"></div>-->
    </div>
    <!-- 背景图 -->
    <!--    商品区域-->
    <div class="relative z-1 px-3.5 flex full lg:w-100 lg:mx-auto lg:min-h-[230px] lg:mt-16 mt-3.5">
      <!-- 商品图 -->
      <div class="ltr:mr-4 lg:ltr:mr-6 rtl:ml-4 lg:rtl:ml-6 w-16 shrink-0 lg:w-[200px]">
        <YImage
          eager
          :src="$withPicOrigin(curGoodsDetail.imageUrl)"
          :alt="`${$mt('how to recharge')} ${curGoodsDetail.name}`"
          height="100"
          width="100"
          class="shrink-0 object-cover product-poster bg-[rgba(255,255,255,0.2)] rounded h-16 w-16 lg:w-[200px] lg:h-[200px] card-hover cursor-pointer" />
      </div>
      <section>
        <h1
          class="lg:text-4xl lg:mt-2 font-mono lg:leading-10 uppercase mb-2 lg:mb-5 break-all text-xl text-white leading-7">
          {{ curGoodsDetail.name }}
        </h1>
        <div class="flex flex-wrap items-center mb-2 lg:mb-4">
          <div class="flex items-center ltr:mr-4 rtl:ml-4">
            <w-image
              class="ltr:mr-1 rtl:ml-1 w-3.5 h-3.5 lg:w-5 lg:h-5"
              :src="useAsset('detail/item_icon_region.png')"
              :alt="curGoodsDetail.areaCode" />
            <span class="text-xs lg:text-base text-white1">{{ curGoodsDetail.areaCode }}</span>
          </div>
          <div class="flex items-center ltr:mr-4 rtl:ml-4">
            <w-image
              class="ltr:mr-1 rtl:ml-1 w-3.5 h-3.5 lg:w-5 lg:h-5"
              :src="useAsset('detail/item_icon_fast.png')"
              alt="Instant Delivery" />
            <span class="text-xs lg:text-base text-white1">{{ $mt('Instant Delivery') }}</span>
          </div>
          <div class="flex items-center">
            <w-image
              class="ltr:mr-1 rtl:ml-1 w-3.5 h-3.5 lg:w-5 lg:h-5"
              :src="useAsset('detail/item_icon_safe.png')"
              alt="Instant Delivery" />
            <span class="text-xs lg:text-base text-white1">{{ $mt('Safe & Secure payment') }}</span>
          </div>
        </div>
        <p class="items-center flex mt-2 mb-3">
          <w-icon name="light" class="mr-1 -ml-0.5 w-6 lg:block hidden" />
          <span class="text-[rgba(255,255,255,0.6)] leading-5 text-xs lg:text-base">
            {{
              curGoodsDetail.description?.trim().length
                ? curGoodsDetail.description
                : $mt(
                    'At BitTopup, easily top up your games, live streams, and purchase gift cards, enjoying a convenient payment experience and great discounts!',
                  )
            }}
          </span>
        </p>
      </section>
    </div>
  </section>
</template>

<script setup lang="ts">
import YImage from '~/components/logic/YImage.vue'
import WImage from '~/components/logic/WImage.vue'
import { useGoodsStore } from '~/store/goods'
import WIcon from '~/components/logic/WIcon.vue'

const goodsStore = useGoodsStore()
const { curGoodsSkuList, curGoodsDetail } = storeToRefs(goodsStore)
</script>
<style lang="scss">
.goods-bg-gradient {
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(255, 255, 255, 0.1) 30%,
    rgba(255, 255, 255, 0.1) 70%,
    transparent
  );
}
</style>
